<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>text</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>

	<body>
		<canvas id="canvas" width="1200" height="1200"></canvas>

		<script type="text/javascript">
			function draw() {
				var canvas = document.getElementById('canvas')
				if (!canvas.getContext) return

				var ctx = canvas.getContext('2d')

				ctx.fillStyle = 'red'
				ctx.save()

				ctx.translate(100, 100)
				ctx.rotate((Math.PI / 180) * 45)
				ctx.fillStyle = 'blue'
				ctx.fillRect(0, 0, 100, 100)
				ctx.restore()

				ctx.save()
				ctx.translate(0, 0)
				ctx.fillRect(0, 0, 50, 50)
				ctx.restore()
			}

			draw()
		</script>
	</body>
</html>
